<template>
  <div class="dashboard-container">
    <div class="bgc">
      <div
        class="title"
        style="
          width: 100%;
          color: #fff;
          font-weight: 500;
          font-size: 24px;

          box-sizing: border-box;
          padding-left: 20px;
          display: flex;
          align-items: center;
          margin-top: 20px;
          margin-bottom: 30px;
        "
      >
        {{ form.id > 0 ? '编辑' :'添加' }} 项目
      </div>
      <div class="forms">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" class="el-inputs" />
          </el-form-item>

          <el-form-item label="公司Logo" prop="">
            <el-upload
              :action="uploadAction"
              :limit="1"
              :file-list="logoList"
              :on-success="uploadLogoSuccess"
              :on-progress="logoProcess"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :class="{disabled:uploadDisabled}"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="项目图" prop="">
            <el-upload
              :action="uploadAction"
              :on-success="uploadPicSuccess"
              drag
            >
              <i class="el-icon-upload" />
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="可访问人员" prop="">
            <el-checkbox-group v-model="form.adminIds">
              <el-checkbox v-for="item in admins" :key="item.id" :label="item.id" :value="item.id">{{ item.nickname }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item class="" style="display: flex; justify-content: center">
            <el-button
              type="primary"
              style="margin: 0 auto"
              @click="submitForms('form')"
            >提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { project_admins, project_edit, project_info } from '@/api/project'

export default {
  data() {
    return {
      uploadAction: process.env.VUE_APP_BASE_API + '/admin/upload',
      dialogImageUrl: '',
      dialogVisible: false,
      logoLogoList: [],
      uploadDisabled: false,
      logoList: [],
      info: {},
      form: {
        id: 0,
        name: '',
        logo: '',
        picture: '',
        adminIds: []
      },
      admins: [],
      rules: {
        name: [{ required: true, message: '请输入视图名称', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  created() {
    this.getProjectInfo()
    this.getAdminList()
  },
  methods: {
    logoProcess() {
      this.uploadDisabled = true
    },
    uploadLogoSuccess(response, file, fileList) {
      //
      if (response.code === 200) {
        this.form.logo = response.data.path
        this.dialogImageUrl = process.env.VUE_APP_BASE_API + response.data.path
      }
    },
    uploadPicSuccess(response, file, fileList) {
      if (response.code === 200) {
        this.form.picture = response.data.path
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      this.dialogVisible = false
    },
    handlePictureCardPreview(file) {
      this.uploadDisabled = true
      this.dialogVisible = true
      // this.dialogImageUrl = file.url
    },
    getProjectInfo() {
      project_info(this.$store.getters.currentProjectId).then(res => {
        if (res.code === 200) {
          this.form = res.data
          this.logoList = []
          // this.logoList.push(process.env.VUE_APP_BASE_API + res.data.logo)
        }
      })
    },
    getAdminList() {
      project_admins(this.$store.getters.currentProjectId).then(res => {
        this.admins = res.data
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].status === 1) {
            this.form.adminIds.push(res.data[i].id)
          }
        }
      })
    },
    submitForms(formName) {
      this.$refs[formName].validate(valid => {
        project_edit(this.form).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            })

            this.$store.dispatch('project/getProjectList')

            setTimeout(() => {
              this.$router.push({
                path: 'projectManagement',
                query: { project_id: this.$store.getters.currentProjectId }
              })
            }, 1500)
          }
        })
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.bgc {
  width: 90%;
  margin: 0 auto;
  height: 80vh;
  border: 1px solid rgb(101, 166, 231);
  // background-color: red;
  //   width: 400px;
  //  height: 300px;
  //  background-color: #222 !important;
  //  border-radius: 10px;
  //  display: flex;
  //  align-items: center;
  //  justify-content: center;
  //  font-size: 20px;
  //  color: #fff;
  //  font-weight: 800;
  //  position: relative;
  //  z-index: 20;
  // background: url('../../views/images/编组-3-20240612172302722_副本.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-color: red;
}
::v-deep .el-step__title.is-success {
  color: #fff;
}
::v-deep .el-step__title.is-process {
  color: #ccc !important;
}
.demo-ruleForm {
  width: 500px;
  margin: 0 auto;
  margin-top: 20px;
}
.forms {
  width: 800px;
  margin: 0 auto;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  color: #fff;
}
::v-deep .el-textarea__inner {
  background-color: transparent !important;
  color: #fff;
}

::v-deep .el-upload--picture-card{
  background-color: transparent !important;
}

::v-deep .el-upload-dragger{
  background-color: transparent !important;
}

::v-deep .disabled >>> .el-upload--picture-card{
  display: none;
}

</style>
